<template>
  <div class="container">
    <el-card>
      <!-- 头部-->
      <div class="header">
        <span class="header-tips">说明：目前支持学科和关键字条件筛选 </span>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </div>
      <!-- /头部-->

      <!-- 表单 -->
      <el-form label-width="80px" :model="subjectsForm" ref="subjectsForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select
                placeholder="请选择"
                v-model="subjectsForm.subjectID"
                @change="getSubjectList"
              >
                <el-option
                  v-for="item in subjectsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="twoLevelDirectory">
              <el-select
                placeholder="请选择"
                v-model="subjectsForm.twoLevelDirectory"
              >
                <el-option
                  v-for="item in directorysList"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select placeholder="请选择" v-model="subjectsForm.tags">
                <el-option
                  v-for="item in tagsList"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input
                placeholder="根据题干搜索"
                v-model="subjectsForm.keyword"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select
                placeholder="请选择"
                v-model="subjectsForm.questionType"
              >
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
                <el-option label="简答" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select placeholder="请选择" v-model="subjectsForm.difficulty">
                <el-option label="简单" value="1"></el-option>
                <el-option label="一般" value="2"></el-option>
                <el-option label="困难" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select placeholder="请选择" v-model="subjectsForm.direction">
                <el-option
                  v-for="item in direction"
                  :key="item.id"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select placeholder="请选择" v-model="subjectsForm.creatorID">
                <el-option
                  v-for="item in username"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="subjectsForm.remarks" clearable> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="subjectsForm.shortName" clearable> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-col :span="12">
                <el-form-item prop="province">
                  <el-select
                    placeholder="请选择"
                    v-model="subjectsForm.province"
                    @change="loadCity"
                    class="el-col-small"
                  >
                    <el-option
                      v-for="(item, index) in provinces"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="city">
                  <el-select
                    placeholder="请选择"
                    v-model="subjectsForm.city"
                    class="el-col-small"
                  >
                    <el-option
                      v-for="(item, index) in citys"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="form-btn">
              <el-button size="mini" @click="register">清除</el-button>
              <el-button type="primary" size="mini" @click="onSearch"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- /表单 -->

      <!-- 标签页 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first" :chkState="null"></el-tab-pane>
        <el-tab-pane label="待审核" name="second" :chkState="0"></el-tab-pane>
        <el-tab-pane label="已审核" :chkState="1" name="third"></el-tab-pane>
        <el-tab-pane
          size="mini"
          :chkState="2"
          label="已拒绝"
          name="fourth"
        ></el-tab-pane>
      </el-tabs>
      <!-- /标签页 -->

      <!-- 消息提示 -->
      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- /消息提示 -->

      <!-- 表格 -->
      <el-table
        style="width: 100%"
        :data="paramsForm"
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        fit
        highlight-current-row
        border
      >
        <el-table-column label="试题编号" prop="number" width="120">
        </el-table-column>
        <el-table-column label="学科" prop="subject" width="120">
        </el-table-column>
        <el-table-column label="目录" prop="catalog" width="120">
        </el-table-column>
        <el-table-column label="题型" width="120">
          <template slot-scope="{ row }">
            <span v-if="row.questionType == 1">单选</span>
            <span v-else-if="row.questionType == 2">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="280">
          <template slot-scope="{ row }">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addDate" width="180">
          <template slot-scope="scope">
            <span>{{
              scope.row.addDate | parseTimeByString('{y}-{m}-{d} {h}:{m}:{s}')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="难度" width="80">
          <template slot-scope="{ row }">
            <span v-if="row.difficulty == 1">简单</span>
            <span v-else-if="row.difficulty == 2">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column
          label="录入人"
          prop="creator"
          width="120"
        ></el-table-column>
        <el-table-column label="审核状态" prop="chkState" width="120">
          <template slot-scope="{ row }">
            <span v-if="row.chkState === 1">已通过</span>
            <span v-else-if="row.chkState === 2">已拒绝</span>
            <span v-else>待审核</span>
          </template>
        </el-table-column>
        <el-table-column
          label="审核意见"
          prop="chkRemarks"
          width="150"
        ></el-table-column>
        <el-table-column
          label="审核人"
          prop="chkUser"
          width="120"
        ></el-table-column>
        <el-table-column label="发布状态" prop="publishState" width="150">
          <template slot-scope="{ row }">
            <span v-if="row.chkState === 0 || row.chkState === 2">待发布</span>
            <span v-else-if="row.publishState === 1">已上架</span>
            <span v-else-if="row.publishState === 0">已下架</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          prop="publishState"
          fixed="right"
          width="200"
        >
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="loadRandoms(row.id)"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="onClickChkState(row.id)"
              :disabled="row.chkState === 0 ? false : true"
              >审核</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="
                $router.push({
                  path: '/questions/new',
                  query: {
                    id: row.id
                  }
                })
              "
              :disabled="row.publishState === 1 ? true : false"
              >修改</el-button
            >

            <el-button
              type="text"
              size="mini"
              v-if="row.publishState === 1"
              @click="downChoiceList(row.id)"
            >
              下架
            </el-button>
            <el-button
              type="text"
              size="mini"
              v-else-if="row.publishState === 0"
              @click="upChoiceList(row.id)"
            >
              上架
            </el-button>

            <el-button
              type="text"
              size="mini"
              @click="deleteChoice(row.id)"
              :disabled="row.chkState === 1 ? true : false"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- /表单 -->

      <!-- 分页 -->
      <div class="pagination">
        <PageTool
          :paginationPage="subjectsForm.page"
          :paginationPagesize="subjectsForm.pagesize"
          :total="total"
          @pageChange="handleCurrentChange"
          @pageSizeChange="handleSizeChange"
        ></PageTool>
      </div>
      <!-- /分页 -->

      <!-- 弹出框 -->
      <questions-check
        :chkDialogFormVisible.sync="ChkDialogFormVisible"
        :chkID.sync="chkID"
        @updateChk="updateChk"
      />
      <!-- /弹出框 -->

      <!-- 对话框 -->
      <questions-randoms
        :isShowPuop.sync="isShowPuop"
        :cartId.sync="cartId"
        v-if="isShowPuop"
      />
      <!-- /对话框 -->
    </el-card>
  </div>
</template>

<script>
import questionsRandoms from '@/module-hmmm/components/questions-preview'
import { simpleSubjectsList } from '@/api/hmmm/subjects'
import { direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys.js'
import {
  getChoiceForm,
  addPublishState,
  add,
  getFullName,
  directorysDetail,
  tagsDetail
} from '@/api/hmmm/questions'
import PageTool from '../components/page-tool'
import QuestionsCheck from '../components/questions-check'
export default {
  data() {
    return {
      activeName: 'first',
      subjectsForm: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        twoLevelDirectory: '',
        tags: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: null,
        province: '',
        city: '',
        shortName: '',
        keyword: null,
        remarks: '',
        chkState: null
      },
      paramsForm: [],
      subjectsList: [],
      total: 0,
      alertText: '',
      provinces: [],
      citys: [],
      direction: direction,
      listLoading: true,
      ChkDialogFormVisible: false,
      chkID: 0,
      username: [],
      isShowPuop: false,
      cartId: 0,
      tagsList: [],
      directorysList: []
    }
  },
  components: {
    PageTool,
    QuestionsCheck,
    questionsRandoms
  },
  methods: {
    loadRandoms(id) {
      this.isShowPuop = true
      this.cartId = id
    },
    async deleteChoice(id) {
      try {
        await this.$confirm('您确认要移出该试题吗?')
        await add({ id, choiceState: 0 })
        this.$router.push('/questions/list')
        this.$message.success('移出成功!')
      } catch (error) {
        this.$message.info('您取消了操作')
      }
    },
    async upChoiceList(id) {
      try {
        await this.$confirm('您确认要上架该试题吗?')
        await addPublishState({ id, publishState: 1 })
        this.loadChoiceForm()
        this.$message.success('上架成功!')
      } catch (error) {
        this.$message.info('您取消了操作')
      }
    },
    async downChoiceList(id) {
      try {
        await this.$confirm('您确认要下架该试题吗?')
        await addPublishState({ id, publishState: 0 })
        this.loadChoiceForm()
        this.$message.success('下架成功!')
      } catch (error) {
        this.$message.info('您取消了操作')
      }
    },
    onClickChkState(id) {
      this.ChkDialogFormVisible = true
      this.chkID = id
    },
    async onSearch() {
      this.subjectsForm.page = 1
      this.loadChoiceForm(this.subjectsForm)
    },
    loadChoiceForm(params) {
      this.listLoading = true
      getChoiceForm(this.subjectsForm)
        .then(res => {
          this.paramsForm = res.data.items
          this.total = res.data.counts
          this.alertText = `一共 ${this.total} 条记录`
          this.listLoading = false
          this.provinces = provinces()
        })
        .catch(e => {
          this.$message.e('加载失败，请稍后再试')
        })
    },
    async handleClick(tab) {
      this.listLoading = true
      try {
        this.subjectsForm.chkState = tab.$attrs.chkState
        const res = await getChoiceForm(this.subjectsForm)
        this.paramsForm = res.data.items
        this.listLoading = false
        this.total = res.data.counts
        this.alertText = `一共 ${this.total} 条记录`
      } catch (error) {
        this.$message.error('加载失败，请稍后再试')
      }
    },
    register() {
      this.$refs.subjectsForm.resetFields()
      this.loadChoiceForm()
      this.tagsList = []
      this.directorysList = []
    },
    async getSubjectList(val) {
      this.tagsList = []
      this.directorysList = []
      try {
        const res = await directorysDetail({ id: val })
        if (res.data.directoryName) {
          this.tagsList.push(res.data.directoryName)
        }
        const res1 = await tagsDetail({ id: val })
        if (res1.data.tagName) {
          this.directorysList.push(res1.data.tagName)
        }
      } catch (error) {
        this.$message.error('加载失败，请稍后再试')
      }
    },
    loadCity(val) {
      this.citys = citys(val)
    },
    async loadSubjectList() {
      try {
        const res = await simpleSubjectsList()
        this.subjectsList = res.data
        this.provinces = provinces()
      } catch (error) {
        this.$message.error('加载失败，请稍后再试')
      }
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.subjectsForm.pagesize = val
      if (this.subjectsForm.page === 1) {
        this.loadChoiceForm()
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.subjectsForm.page = val
      this.loadChoiceForm()
    },
    updateChk() {
      this.loadChoiceForm()
    },
    async getUserNmae() {
      try {
        const res = await getFullName()
        this.username = res.data
      } catch (error) {
        this.$message.error('加载失败，请稍后再试')
      }
    }
  },
  mounted() {
    this.getUserNmae()
    this.loadSubjectList()
    this.loadChoiceForm()
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 0 10px;
  margin: 10px 0;
  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    .header-tips {
      font-size: 12px;
      color: pink;
    }
  }
  .el-select {
    width: 100%;
  }
  .el-col-small {
    width: 98%;
  }
  .form-btn {
    float: right;
  }
  .el-alert {
    margin-bottom: 15px;
  }
  .pagination {
    margin-top: 20px;
    margin-bottom: 20px;
    float: right;
  }
}
</style>
